<template>
  <div class="footer">
    <hr/>
    <em>Change the title of your shopping list here</em>
    <input :value="title" type="text" @input="onInput({ title: $event.target.value, id: id })"/>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: ['id', 'title'],
  methods: mapActions({
    onInput: 'changeTitle'
  })
}
</script>

<style scoped>
.footer {
  font-size: 0.7em;
  margin-top: 20vh;
}
</style>
